<template>
	<div id="permissions">
		<el-card class="box-card" style="margin-bottom: 10px;">
			<div slot="header">
    		<el-button class="iconfont icon-caidan menuBut" type="primary" 	size="mini" @click="appendMenu"  v-permissions="['B_PERMISSION_SAVE']">新增菜单</el-button>
  		</div>
			<el-tree
				:data="treeData"
				highlight-current
				ref="tree"
				node-key="id"
				:expand-on-click-node="false"
				:props="defaultProps">
				<div class="custom-tree-node" slot-scope="{ node, data }">
					<span
						:class="[
							'iconfont',
							data.type === 1 ? 'fw icon-caidan1' : '',
							data.type === 2 ? 'icon-anniu' : '',
							data.type === 3 ? 'icon-jiekou' : ''
						]"
						><i class="m">:</i>{{ data.name}}</span>
					<span class="buttons">
						<el-button
							v-if="data.type === 1"
							size="mini"
							type="primary"
							v-permissions="['B_PERMISSION_SAVE']"
							@click="() => appendMenu(data)">
							新增子菜单
						</el-button>
						<el-button
							v-if="data.type === 1"
							size="mini"
							type="primary"
							v-permissions="['B_PERMISSION_SAVE']"
							@click="() => appendBut(data)">
							新增按钮权限
						</el-button>
						<el-button
							v-if="data.type === 1"
							size="mini"
							type="success"
							v-permissions="['B_PERMISSION_SAVE']"
							@click="() => appendApi(data)">
							新增API权限
						</el-button>
						<el-button
							size="mini"
							type="warning"
							v-permissions="['B_PERMISSION_UPDATE']"
							@click="() => editorHandler(data)">
							编辑
						</el-button>
						<el-button
						  v-if="!data.children || data.children.length===0"
							type="danger"
							size="mini"
							v-permissions="['B_PERMISSION_DEL']"
							@click="() => deleteHandler(data)">
							删除
						</el-button>
					</span>
				</div>
			</el-tree>
		</el-card>
	</div>

</template>
<script>
import { mapGetters } from 'vuex';
export default {
	computed : {
		...mapGetters('User', {
			user : 'user'
		})
	},
	data () {
		return {
			treeData : [],
			defaultProps : {
				children : 'children',
				name : 'name'
			},
			baseDialogForm : [ // 权限基础弹框配置
				{
					type : 'text',
					label : '权限名称',
					placeholder : '请输入权限名称',
					key : 'name',
					maxlength : 15,
					rules : [
						{ required : true, message : '请输入权限名称', trigger : 'blur' }
					]
				},
				{
					type : 'text',
					label : '权限编码',
					placeholder : '请输入权限编码',
					key : 'code',
					maxlength : 20,
					rules : [
						{ required : true, message : '请输入权限编码', trigger : 'blur' }
					]
				},
				{
					type : 'text',
					label : '权限描述',
					placeholder : '请输入权限描述',
					key : 'description',
					maxlength : 20
				}
			],
			menuDialogForm : [ // 菜单配置
				{
					type : 'text',
					label : '路由地址',
					placeholder : '请输入路由地址',
					key : 'menuUrl',
					maxlength : 30,
					rules : [
						{ required : true, message : '请输入路由地址', trigger : 'blur' }
					]
				},
				{
					type : 'text',
					label : '菜单图标编码',
					placeholder : '请输入菜单图标编码',
					key : 'menuIcon',
					maxlength : 10
				},
				{
					type : 'number',
					label : '排序',
					placeholder : '请输入排序',
					key : 'menuOrder',
					maxlength : 2
				}
			],
			butDialogForm : [ // 按钮配置
				{
					type : 'text',
					label : '按钮样式编码',
					placeholder : '请输入按钮样式编码',
					key : 'pointClass',
					maxlength : 10
				},
				{
					type : 'text',
					label : '按钮图标编码',
					placeholder : '请输入按钮图标编码',
					key : 'pointIcon',
					maxlength : 10
				},
				{
					type : 'radio',
					label : '状态',
					placeholder : '请选择状态',
					key : 'pointStatus',
					options : [
						{
							value : 0,
							label : '禁用'
						},
						{
							value : 1,
							label : '启动'
						}
					]
				}
			],
			apiDialogForm : [ // api配置
				{
					type : 'text',
					label : '接口地址',
					placeholder : '请输入接口地址',
					key : 'apiUrl',
					maxlength : 30
				},
				{
					type : 'select',
					label : '请求类型',
					placeholder : '请选择请求类型',
					key : 'apiMethod',
					options : [
						{
							value : 'get',
							label : 'get'
						},
						{
							value : 'post',
							label : 'post'
						},
						{
							value : 'put',
							label : 'put'
						},
						{
							value : 'delete',
							label : 'delete'
						}
					]
				}
			]
		};
	},
	async created () {
		this.id = '';
		this.pid = '0';// 父级ID
		this.pName = '';// 父级名
		this.type = 1; // 1:菜单 2:按钮 3:API
		this.init();
	},
	methods : {
		async	init (){
			const result = await this.$api.getMenuAndBtnApi();
			this.treeData = result.data.menu;
		},
		// 新增
	  async	handlerAdd (parameMap, callback) {
			try {
				parameMap.menuOrder = Number(parameMap.menuOrder || 99);
				await	this.$api.permissionAdd({...parameMap,pid : String(this.pid),type : this.type});
				callback(false);
				this.init();
			} catch (error) {
				callback(true);
			}
		},
		// 新增菜单弹窗
		appendMenu (data){
			let title = '新增一级菜单';
			this.type = 1;
			const dialogForm = [...this.baseDialogForm,...this.menuDialogForm];
			if (data.id){
				this.pid = data.id;
				this.pName = data.name;
				title = `${data.name} > 新增子菜单`;
			} else {
				this.pid = 0;
				this.pName = '';
			}
			this.$dialogForm.open({
				config : {
					title,
					leftButText : '取消',
					isRightBut : true
				},
				disabledAll : false,
				dialogForm : dialogForm,
				handlerFn : this.handlerAdd
			});
		},
		// 删除
		deleteHandler (data){
			this.$confirm(`是否删除【${data.name}】?`,'提示',{
				confirmButtonText : '确定',
				cancelButtonText : '取消',
				beforeClose : async (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						instance.confirmButtonText = '执行中...';
						try {
							await this.$api.permissionDelete(data.id);
							this.init();
						} finally  {
							instance.confirmButtonLoading = false;
							done();
						}

					} else {
						done();
						this.$notify({
							title : '警告',
							message : '取消操作',
							type : 'warning'
						});
					}
				}
			});
		},
		// 修改
		editorHandler (data){
			this.id = data.id;
			this.type = data.type;
			let dialogForm = [...this.baseDialogForm];
			let title;
			if (Number(data.type)===1){
				title = `修改菜单:${data.name}`,
				data.menuUrl = data.permissionMenu.menuUrl;
				data.menuOrder= data.permissionMenu.menuOrder;
				dialogForm = [...this.baseDialogForm,...this.menuDialogForm];
			} else if (Number(data.type)===2){
				title = `修改按钮:${data.name}`,
				dialogForm = [...this.baseDialogForm,...this.butDialogForm];
			} else {
				title = `修改接口:${data.name}`,
				dialogForm = [...this.baseDialogForm,...this.apiDialogForm];
			}
			this.$dialogForm.open({
				config : {
					title,
					leftButText : '取消',
					isRightBut : true
				},
				disabledAll : false,
				dialogForm : dialogForm,
				handlerFn : this.handlerUpdate,
				result : data
			});
		},
		// 修改
		async handlerUpdate (parameMap, callback) {
			try {
				if (parameMap.menuOrder){
					parameMap.menuOrder = Number(parameMap.menuOrder || 99);
				}
				await	this.$api.permissionUpdate({...parameMap,id : this.id,type : this.type});
				callback(false);
				this.init();
			} catch (error) {
				callback(true);
			}
		},
		// 新增按钮
		appendBut (data){
			this.type = 2;
			this.pid = data.id;
			this.pName = data.name;
			const dialogForm = [...this.baseDialogForm,...this.butDialogForm];
			this.$dialogForm.open({
				config : {
					title : `${data.name} > 新增按钮`,
					leftButText : '取消',
					isRightBut : true
				},
				disabledAll : false,
				dialogForm : dialogForm,
				handlerFn : this.handlerAdd
			});
		},
		// 新增API
		appendApi (data){
			this.type = 3;
			this.pid = data.id;
			this.pName = data.name;
			const dialogForm = [...this.baseDialogForm,...this.apiDialogForm];
			this.$dialogForm.open({
				config : {
					title : `${data.name} > API权限新增`,
					leftButText : '取消',
					isRightBut : true
				},
				disabledAll : false,
				dialogForm : dialogForm,
				handlerFn : this.handlerAdd
			});

		}
	}
};
</script>
<style lang="scss" scoped>
.custom-tree-node {
	width: 100%;
	display: flex;
	align-items: center;
	justify-items: baseline;
}
.buttons {
	width: 100%;
	text-align: right;
	flex: 1;
	margin-left: 100px;
}
.buttons{
	button{
		height: 20px;
		line-height: 6.5px;
	}
}
.m{
	font-weight: bold;
	margin: 0 2px
}
.fw{
	font-weight: bold;
}
.menuBut{
	height: 28px;
	font-size: 14px;
}
</style>
<style lang="scss">
#permissions{
	.el-card__header{
		text-align: right !important;
	}
}
#append-api{
	text-align: right;
}
</style>
